<!--  -->
<template>
  <div id="main" style="width:100%;height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    lineChart: {
      type: Array,
      default: () => []
    },
    label: {
      type: String,
      default: ''
    },
    yLine:{
      type: [Number, String],
      default: ''
    }
  },
  watch: {
    lineChart: {
      handler (val) {
        this.init()
      },
      deep: true
    }
  },
  data () {
    return {

    }
  },
  components: {

  },
  mounted () {
    setTimeout(() => {
      this.init()
    }, 20)
  },
  methods: {
    init () {
      const myChart = echarts.init(document.getElementById('main'))
      myChart.setOption({
        color: ['#4393F2', '#789EFF'],
        // title: {
        //   text: '月度代发金额趋势'
        // },
        legend: {
          right: 0
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.lineChart ? this.lineChart.map(item => item.date) : ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value',
          name: this.yLine ? `均值${this.yLine}` : this.yLine
        },
        grid: { // 让图表占满容器

          left: '5%',
          right: '4%',

        },
        series: [
          // {
            // name: '今年',
          //   data: this.lineChart ? this.lineChart.map(item => item.ordinate) : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          //   type: 'line',
          //   smooth: true,
          //   areaStyle: {
          //     opacity: 0.8,
          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //       {
          //         offset: 0,
          //         color: 'rgb(255, 242, 242)'
          //       },
          //       {
          //         offset: 1,
          //         color: 'rgb(255, 255, 255)'
          //       }
          //     ])
          //   },
          // },
          {
            name: this.label,
            data: this.lineChart ? this.lineChart.map(item => item.value) : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            type: 'line',
            smooth: true,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(242, 242, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(255, 255, 255)'
                }
              ])
            },
          }
        ]
      })
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
  }
}
</script>

<style lang='less' scoped>
</style>